<template>
    <div class="wrapper" v-if="item" @click="goToSoreMore(item.name)">
        <div class="left">
            <text class="name">{{item.name}}</text>
            <text class="bookCount">{{item.bookCount}} 本</text>
        </div>
    </div>
</template>

<script>
    import {getImageUrl} from '../../baseConfig'

    export default {
        name: "sort-item",
        props: {
            item: {type : Object , default: undefined},
            bookType: {type: String, default: 'male'},
        },
        methods: {
            goToSoreMore(name) {
                console.log(name)
                this.$emit('goToSoreMore', {major: name, type: this.bookType})
            }
        },
        filters: {
            imageFiler: getImageUrl
        }
    }
</script>

<style scoped>
    .wrapper {
        background-color: rgba(0,0,0, .05);
        padding: 20px 16px;
        margin-top: 20px;
    }

    .left {
        width: 150px;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    .name {
        color: #333333;
    }

    .bookCount {
        color: #666666;
        font-size: 20px;
    }
</style>